<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>恋爱注册页面</title>
        <script>
            function populateYears() {
                const currentYear = new Date().getFullYear();
                const birthYearSelect = document.getElementById('birth-year');
                for (let i = currentYear; i >= 1900; i--) {
                    const option = document.createElement('option');
                    option.value = i;
                    option.textContent = i;
                    birthYearSelect.add(option);
                }
            }
     
            function populateMonths() {
                const months = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
                const birthMonthSelect = document.getElementById('birth-month');
                months.forEach(month => {
                    const option = document.createElement('option');
                    option.value = month;
                    option.textContent = month;
                    birthMonthSelect.add(option);
                });
            }
     
            function populateDays(year, monthName) {
                const months = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
                const birthDaySelect = document.getElementById('birth-day');
                birthDaySelect.innerHTML = '<option value="">--请选择日--</option>';
                const monthIndex = months.indexOf(monthName);
                if (monthIndex !== -1) {
                    const daysInMonth = new Date(year, monthIndex, 0).getDate();
                    for (let i = 1; i <= daysInMonth; i++) {
                        const option = document.createElement('option');
                        option.value = i;
                        option.textContent = i;
                        birthDaySelect.add(option);
                    }
                }
            }
     
            window.onload = function() {
                populateYears();
                populateMonths();
     
                const birthYearSelect = document.getElementById('birth-year');
                const birthMonthSelect = document.getElementById('birth-month');
     
                birthYearSelect.onchange = function() {
                    const birthDaySelect = document.getElementById('birth-day');
                    birthDaySelect.innerHTML = '<option value="">--请选择日--</option>';
     
                    const selectedMonth = birthMonthSelect.value;
                    if (selectedMonth && this.value) {
                        populateDays(this.value, selectedMonth);
                    }
                };
     
                birthMonthSelect.onchange = function() {
                    const selectedYear = birthYearSelect.value;
                    if (selectedYear) {
                        populateDays(parseInt(selectedYear), this.value);
                    }
                };
            };
        </script>
</head>
<body>
    <h2>青春不常在，抓紧谈恋爱</h2>
    <form>
        <label for="gender-male">性别:</label>
        <input type="radio" id="gender-male" name="gender" value="男"> 男
        <input type="radio" id="gender-female" name="gender" value="女"> 女<br><br>

        <label for="birth-year">生日:</label>
        <select id="birth-year">
            <option value="">--请选择年份--</option>
        </select>
        <select id="birth-month">
            <option value="">--请选择月份--</option>
        </select>
        <select id="birth-day">
            <option value="">--请选择日--</option>
        </select><br><br>

        <label for="region">所在地区</label>
        <input type="text" id="region" value="北京"><br><br>

        <label for="marriage-status">婚姻状况:</label>
        <input type="radio" id="single" name="marriage-status" value="未婚" checked> 未婚
        <input type="radio" id="married" name="marriage-status" value="已婚"> 已婚
        <input type="radio" id="divorced" name="marriage-status" value="离婚"> 离婚<br><br>

        <label for="education">学历:</label>
        <input type="text" id="education" value="博士后"><br><br>

        <label for="like-type">喜欢的类型:</label>
        <input type="checkbox" id="charming" name="like-type" value="妩媚的"> 妩媚的
        <input type="checkbox" id="cute" name="like-type" value="可爱的"> 可爱的
        <input type="checkbox" id="young" name="like-type" value="小鲜肉"> 小鲜肉
        <input type="checkbox" id="mature" name="like-type" value="老腊肉"> 老腊肉
        <input type="checkbox" id="all" name="like-type" value="都喜欢"> 都喜欢<br><br>

        <label for="introduction">个人介绍</label><br>
        <textarea id="introduction" name="introduction" placeholder="王子斐 23215220119"></textarea><br><br>

        <input type="checkbox" id="agreement" required> 我同意注册条款和会员加入标准<br><br>

        我是会员，立即登录<br><br>

        <p>我承诺</p >
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
</body>
</html>